<template>
    <div id="bg">
        <fieldset id="field">
            <ul style="list-style: none;">
                <li style="margin-top: 20px;">
                    <div class="input-group" style="width: 230px;">
                        <label  class="input-group-addon" for="registerName"><i class="glyphicon glyphicon-user"></i></label>
                        <input id="registerName" class="form-control" placeholder="请输入昵称" type="text" v-model="regist.name">
                    </div>
                </li>
                <li style="margin-top: 20px;">
                    <div class="input-group" style="width: 230px;">
                        <label class="input-group-addon" for="registerPhone"><i class="glyphicon glyphicon-phone"></i></label>
                        <input id="registerPhone" class="form-control" placeholder="请输入电话号码" type="text" v-model="regist.phone">
                    </div>
                </li>
                <li style="margin-top: 20px;">
                    <div class="input-group" style="width: 230px;">
                        <label  class="input-group-addon" for="registerPassword"><i class="glyphicon glyphicon-lock"></i></label>
                        <input id="registerPassword" class="form-control" placeholder="请输入密码" type="password" v-model="regist.password">
                    </div>
                </li>
                <li style="margin-top: 13px;">
                    <button id="register" value="" @click="getRegister()">立即注册</button>
                    <label style="font-size: 3px;margin-top: 5px;margin-left: 50px;">已有账号，<a href="http://localhost:8080/login">返回登录</a></label>
                </li>
            </ul>
        </fieldset>
    </div>
</template>

<script>
import axios from "axios";

export default {
    name:'register',
    data:function(){
        return{
            regist:{
                name:'',
                phone:'',
                password:''
            }
        }
    },
    methods:{
        getRegister(){
            if (this.regist.name != '' && this.regist.phone != ''
            && this.regist.password != ''){
                if (!/^[\u4E00-\u9FA5A-Za-z0-9]+$/.test(this.regist.name) || !/^[0-9]*$/.test(this.regist.phone)
                || !/^\w+$/.test(this.regist.password)) {
                    alert("格式错误，请重新输入");
                    this.$router.go(0)
                } else {
                    this.$axios.post(
                    '/user/register',
                    this.$qs.stringify({
                        name:this.regist.name,
                        password:this.regist.password,
                        avatar:'',
                        signature:'',
                        gender:0,
                        address:'',
                        phone: this.regist.phone,
                        money:1000
                    })
                    ).then((res) => {
                        console.log('register' + ' 获取成功...')
                        console.log(res.data)
                        if(res.data){
                            alert("注册成功，即将跳转登录页面")
                            setTimeout("javascript:location.href='http://localhost:8080/login'",2000)
                        }else{
                            alert("已有此账号，请重新注册")
                            this.$router.go(0)
                        }
                    }).catch(function (error) {
                        console.log('register 获取失败...')
                        alert("注册失败,请重新输入")
                        this.$router.go(0)
                        console.log(error)
                    })
                }
            }else{
                alert("输入不能为空")
                this.$router.go(0)
            }
        },
    }
}
</script>

<style scoped>
    #bg{background: url(../../static/undraw_join_of2w.svg);background-repeat: no-repeat;background-size: 100%;height: 720px;padding-top: 100px;}
    #register{width: 200px;height: 33px;background-color: rgb(238, 231, 210);margin-left: 15px;border-radius: 5px;}
    #field{width: 330px; height: 260px;margin: auto;background-color: rgb(243, 235, 238);padding-top: 20px;border-radius: 8px;}
</style>
